<body>

<div id="oOut" style="font:normal bold 32px Arial">z</div>

<textarea id='oInp' type='text' onkeypress='on_input(this)' cols="30" rows="6"></textarea>

<script>

var $=function(x){return document.getElementById(x)};

var oOut=$("oOut");
var oInp=$("oInp");

var echo=function(x){oOut.innerHTML=x};
var inp_lk=false;
var inp=function(x){
	if(inp_lk)return;
	if(oInp.value!=x)
		oInp.value=x;
};


var on_input=(function(){
	var timer=null;
	var send=function(x){
		var r = new XMLHttpRequest();
		x=x.replace(/"/g, "'");
		r.open('GET', '/app/input("'+x+'")', true);
		r.onreadystatechange=function(){
			if(r.readyState==4){
				if(r.status==200)
					eval(r.responseText);
			}
		};
		r.send(null);
	};
	return function(th){
		if(timer)window.clearTimeout(timer);
		inp_lk=true;
		timer=window.setTimeout(function(){
			inp_lk=false;
			timer=null;
			send(th.value);
		},300);
	}
})();


echo("privet");

var sync=(function(){
	return function(){
		var r = new XMLHttpRequest();
		r.open('GET', '/app/sync()', true);
		r.onreadystatechange=function(){
			if(r.readyState==4){
				if(r.status==200)
					eval(r.responseText);
				else
					echo("ERROR "+r.status);
			}
		};
		r.send(null);
	};
})();

window.setInterval(function(){sync()},1000);

//window.setInterval(function(){echo(Math.random())},2000);


</script>






